<template>
  <div class="nav-header-wrapper">
    <div class="nav-header">
      <router-link to="/home" href="javascript:;"><h1 class="nav-header-logo"></h1></router-link>
      <a href="https://www.bilibili.com/"
        ><div class="nav-header-tv-icon"></div
      ></a>
      <a href="https://www.bilibili.com/"
        ><div class="nav-header-mainsite">主站</div></a
      >
      <div class="nav-header-search-bar-wrapper">
        <input type="text" placeholder="活动、嘉宾、场馆" />
        <a href="#"><i class="fa fa-search"></i></a>
      </div>
      <!-- 登陆页面 -->
      <div v-show="userinfo" class="usertotal">
        <div class="userinfo">
          <a href=""  @mouseover="hoverindex = 1" @mouseleave="hoverindex = -1">
            <div class="avatar" :class="{ active: hoverindex === 1 }"></div>
          </a>
        </div>

        <div
          class="userdetail"
          v-show="hoverindex === 1"
          @mouseover="hoverindex = 1"
          @mouseleave="hoverindex = -1"
        >
          <div class="name">萌混少女</div>
          <div class="list"  @mouseleave="moveOutDiv">
            <div  v-for="(item,index) in xixi" :class="{ item_on: index === currentIndex }" :key="index" @mouseenter="moveInDiv(index)">{{item}}</div>
            
          </div>
          <div class="loginout" @click="loginout">退出</div>
        </div>
      </div>
      <!-- 未登录页面 -->
      <div class="nav-header-regis-login" v-show="!userinfo">
        <div class="nav-header-register">
          <router-link to="/register"><a href="javascript:;">注册</a></router-link>
          
        </div>
        <div class="nav-header-middle-line"></div>
        <router-link to="/login">
        <div class="nav-header-login">
          <a href="javascript:;">登录</a>
        </div>
        </router-link>
      </div>
      <div class="logining">
        <span class="userName"></span>
        <span>已登录</span>
      </div>
      <div class="order-and-icon-wrapper">
        <div class="order-icon"></div>
        <router-link to="/order" class="order-center"><a href="carts.html">购物车</a></router-link>
      </div>
    </div>
  </div>
</template>

<script>
import throttle from "lodash/throttle";
export default {
  name: "Header",
  data() {
    return {
    
      userinfo:{},
      userinfo1:{},
      hoverindex:-1,
      currentIndex :-1,
      xixi:['个人中心','嘤嘤婴','哈哈哈','dddd','afds']
    }
  },
  mounted(){
     let userinfo = localStorage.getItem('userinfo')
     this.userinfo=userinfo
     
  },
  
    watch:{
      $route(){
        console.log('####')
          let userinfo1 = localStorage.getItem('userinfo')
       this.userinfo1=userinfo1
      }
    },
  methods:{
    loginout(){
        localStorage.removeItem('userinfo')
        this.userinfo=''
    },
       moveInDiv: throttle(
      function (index) {
        // console.log(index);
        this.currentIndex = index;
      },
      20,
      { trailing: false }
    ),
      moveOutDiv(){
          this.currentIndex = -1;
      },
  }
};
</script>

<style>

.nav-header-wrapper {
    width: 100%;
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}

.nav-header {
    width: 1160px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.nav-header-logo {
    cursor: pointer;
    width: 130px;
    height: 27px;
    background: url(../../assets/images/logo.png) no-repeat;
    background-size: 130px 27px
}

.nav-header-tv-icon {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 40px;
    background: url(../../assets/images/icon-tv.png) no-repeat
}

.nav-header-mainsite {
    width: 60px;
    font-size: 14px;
    line-height: 14px;
    color: #636c7b
}

.nav-header-search-bar-wrapper {
    width: 699px;
    height: 40px;
    position: relative
}

.nav-header-search-bar-wrapper input {
    width: 360px;
    height: 40px;
    border: none;
    padding-left: 20px;
    border-radius: 40px;
    font-size: 12px;
    color: #6d757a;
    line-height: 14px;
    background: #f1f3f5;
    float: right
}

.nav-header-search-bar-wrapper i {
    color: #6d757a;
    position: absolute;
    right: 10px;
    top: 13px
}
.userinfo{
    align-items: center;
    display: flex;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    margin-left: 40px;
    width: 90px;
    margin-bottom: 50px;
}
.userinfo .avatar{
     z-index: 100;
        width: 50px;
        height: 50px;
        border-radius: 40%;
        background-image: url(../../assets/images/222.jpg);
        background-size: cover;
        position: absolute;
}
.userinfo .avatar.active{
    transform: scale(2) translateY(15px);
}
.userinfo .avatar .active ::before{
                 content: "";
    display: block;
    background-color: #23ade5;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    opacity: 0;
    animation: shineyoureyes cubic-bezier(.22,.58,.12,.98) .6s forwards;
              }
.userdetail{
    right: 180px;
    z-index: 10;
    background: #fff;
    position: absolute;
    width: 280px;
    height: 500px;
    top: 60px;
    color: #6d757a;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
}
.userdetail .name{
     margin: 0 20px;
    padding-bottom: 18px;
    margin-top: 58px;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    box-shadow: inset 0 -1px 0 0 #e7ecf1;
}
.userdetail .list{
     margin: 0 auto;
    width: 240px;
    height: 330px;
    box-shadow: inset 0 -1px 0 0 #e7ecf1;
    font-size: 30px;
    color: #6d757a;
    
}
.userdetail .list div{
    text-align: center;
    line-height: 50px;
    height: 50px;
    cursor: pointer;

}
.userdetail .list div.item_on{
    background-color: hotpink;
}
.userdetail .loginout{
    padding: 0 10px;
    height: 42px;
    line-height: 42px;
    text-align: center;
        outline: none;
    cursor: pointer;
}

.nav-header-regis-login {
    align-items: center;
    display: flex;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    margin-left: 30px;
    width: 90px
}

.logining {
    display: none;
    width: 90px;
    margin-left: 30px;
    line-height: 20px;
    font-size: 14px;
    color: #999
}

.logining .userName {
    color: #f25d8e
}

.nav-header-register {
    width: 28px;
    height: 20px
}

.nav-header-register a {
    color: #6d757a;
    display: inline-block;
    width: 28px;
    height: 20px
}

.nav-header-register a:hover {
    color: #f25d8e
}

.nav-header-middle-line {
    margin: 0 4px;
    width: 1px;
    height: 12px;
    background: #636c7b
}

.nav-header-login a {
    color: #6d757a
}

.nav-header-login a:hover {
    color: #f25d8e
}

.order-and-icon-wrapper {
    margin-left: 10px;
    display: flex;
    align-items: center
}

.order-and-icon-wrapper a {
    font-size: 14px;
    color: #636c7b;
    line-height: 14px;
    width: 60px
}

.order-and-icon-wrapper a:hover {
    color: #f25d8e
}

.order-and-icon-wrapper .order-icon {
    z-index: 100;
    margin-right: 4px
}


</style>